<template>
  <div class="box">
    <!-- 网页端 -->
    <div class="left">
      <div class="Ltitle">
        <span>题库分类</span>
        <img
          src="@/assets/images/questionBank/扩展2.png"
          v-hasPermi="['system:typeClass:add']"
          alt=""
          @click="(formDialogOption.title = '添加'), (formDialog = true)"
        />
        <img
          src="@/assets/images/questionBank/delete.png"
          v-hasPermi="['system:typeClass:edit']"
          alt=""
          @click="(formDialogOption.title = '修改'), (formDialog = true)"
        />
        <!-- <img src="@/assets/images/questionBank/xiznzeng.png" alt="" /> -->
      </div>
      <div class="Lline"></div>
      <div class="Ltree">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :highlight-current="true"
          :expand-on-click-node="true"
          :default-expand-all="false"
          node-key="id"
          :current-node-key="834"
          ref="elTree"
          :auto-expand-parent="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span v-if="data.reserve1 == 0" style="margin-right: 15px">{{
                node.label
              }}</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="right">
      <div class="RTop" style="padding: 10px 0">
        <el-button type="primary" @click="addQuestions">添加试题</el-button>
        <el-button type="primary" @click="batchAddQuestions"
        >批量导入
        </el-button
        >
        <el-button type="primary" @click="uploadStatisticsBloun = true"
        >上传统计
        </el-button
        >
      </div>
      <div class="RForm">
        <el-form
          ref="form"
          :inline="true"
          label-width="90px"
          :model="queryParams"
        >
          <el-form-item label="标签">
            <el-input
              placeholder="标题"
              @focus="visibles.open = true"
              v-model="queryParams1.questionTypesName"
            ></el-input>
          </el-form-item>
          <el-form-item label="难易度">
            <el-select v-model="queryParams.difficulty" placeholder="请选择">
              <el-option label="简单" value="简单"></el-option>
              <el-option label="普通" value="普通"></el-option>
              <el-option label="困难" value="困难"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型">
            <el-select v-model="queryParams.questionTypes" placeholder="请选择">
              <el-option label="单选题" value="单选题"></el-option>
              <el-option label="多选题" value="多选题"></el-option>
              <el-option label="判断题" value="判断题"></el-option>
              <el-option label="应用题" value="应用题"></el-option>
              <el-option label="填空题" value="填空题"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="试题内容">
            <el-input
              placeholder="试题内容"
              v-model="queryParams.testItemContent"
            ></el-input>
          </el-form-item>
          <el-form-item label="解析">
            <el-input
              placeholder="标题"
              v-model="queryParams.analysis"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建者">
            <el-input
              placeholder="标题"
              v-model="queryParams.createBy"
            ></el-input>
          </el-form-item>
          <el-form-item class="formBtn">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="
                (queryParams.pageNum = 1),
                  (queryParams.pageSize = 10),
                  getTableData()
              "
            >搜索
            </el-button
            >
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="reserveTableData"
            >重置
            </el-button
            >
          </el-form-item>
          <el-form-item></el-form-item>
        </el-form>
      </div>
      <!-- <el-table
        ref="tableRow"
        :row-key="(row) => row.itemBankId"
        @expand-change="tableListExpand"
        :data="tableData"
        style="width: 100%"
        class="tableColumn"
        @row-click="rowClick"
      > -->
      <el-table
        ref="tableRow"
        @expand-change="tableListExpand"
        :data="tableData"
        style="width: 100%"
        class="tableColumn"
        @row-click="rowClick"
      >
        <el-table-column type="expand" width="50">
          <template slot-scope="props">
            <div class="expandBox">
              <div
                class="expandLeft"
                v-if="
                  props.row.questionTypes != '应用题' &&
                  props.row.questionTypes != '填空题'
                "
              >
                <div class="left">
                  <div class="wz">选项</div>
                </div>
                <div class="right" v-if="props.row.questionTypes != '判断题'">
                  <!-- <div class="RTop" v-html="props.row.testItemContent"></div> -->
                  <div class="rBottom">
                    <div
                      class="rItem"
                      id="option"
                      v-for="item in props.row.answerList"
                    >
                      <span>{{ item.identifier }}、</span>
                      <span v-html="item.answerContent"></span>
                    </div>
                  </div>
                </div>
                <div class="right" v-else>
                  <!-- <div class="RTop" v-html="props.row.testItemContent"></div> -->
                  <div class="rBottom">
                    <el-radio label="正确"></el-radio>
                    <el-radio label="错误" style="margin-left: 15px"></el-radio>
                  </div>
                </div>
              </div>
              <div
                class="expandLR"
                v-if="
                  props.row.questionTypes != '应用题' &&
                  props.row.questionTypes != '填空题'
                "
              ></div>
              <div class="expandRight">
                <div
                  style="
                    display: flex;
                    margin-top: 10px;
                    justify-content: flex-end;
                    margin-right: 10px;
                  "
                >
                  <el-button
                    type="primary"
                    @click="deleteTable(props.row)"
                    v-hasPermi="['system:type:remove']"
                  >删除
                  </el-button
                  >
                  <el-button
                    type="primary"
                    style="margin-left: 15px"
                    @click="editTable(props.row)"
                    v-hasPermi="['system:type:edit']"
                  >编辑
                  </el-button
                  >
                </div>
                <div class="eItem">
                  <div class="eLItem">答案</div>
                  <div class="eRItem">{{ props.row.answerJ.join(",") }}</div>
                </div>
                <div
                  class="eItem"
                  style="flex-direction: column; align-items: flex-start"
                >
                  <div class="eLItem">解析</div>
                  <!-- <div class="eRItem" v-html="props.row.analysis"></div> -->
                  <div
                    class="eRItem"
                    v-html="setContent(gogo(props.row.analysis))"
                  ></div>
                </div>
                <div class="eItem">
                  <div class="eLItem">难度</div>
                  <div class="eRItem">{{ props.row.difficulty }}</div>
                </div>
                <!-- <div style="display: flex;position: absolute;bottom: 40px;right: 30px;"> -->
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="试题内容" min-width="480">
          <template slot="header" slot-scope="scope">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <div>试题内容</div>
              <div class="tableTitle">
                <span class="tableTitleKey">题型总数：</span>
                <span class="tableTitleValue">{{ total }}</span>
                <span class="tableTitleKey">题库中总题数：</span>
                <span class="tableTitleValue">{{ totalQuantity }}</span>
              </div>
            </div>
          </template>
          <template slot-scope="scope">
            <div>
              <div
                class="info"
                v-html="setContent(scope.row.testItemContent)"
              ></div>
              <div class="tableInfo">
                <div class="tableItem">
                  <div class="key">题型：</div>
                  <div class="value">{{ scope.row.questionTypes }}</div>
                </div>
                <!-- <div class="tableItem">
                  <div class="key">分类：</div>
                <div class="value">{{ scope.row.classification }}</div>
                </div> -->
                <div class="tableItem">
                  <div class="key">创建人：</div>
                  <div class="value">{{ scope.row.createBy }}</div>
                  <!-- <el-button @click="gogo(scope.row.analysis)">操作</el-button> -->
                </div>
                <!-- <div class="tableItem">
                  <div class="key">创建时间：</div>
                <div class="value">{{ scope.row.createTime }}</div>
                </div> -->
                <div class="tableItem">
                  <div class="key">标签：</div>
                  <div class="value1">
                    <el-tag
                      class="vlaue1Item"
                      :key="index"
                      v-for="(tag, index) in scope.row.itemBankQuestionTypeList"
                    >
                      {{ tag.questionTypes }}
                    </el-tag>
                  </div>
                  <!-- <div class="value">{{ setLabel(scope.row.itemBankQuestionTypeList) }}</div> -->
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <pagination
          v-if="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getTableData"
        />
      </div>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 300px;
        "
      >
        <el-upload
          class="upload-demo"
          drag
          :on-success="upSuccess"
          :headers="{ Authorization: 'Bearer ' + getToken() }"
          action="http://192.168.3.16:8080/system/bank/importData"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div> -->
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
        >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :title="formDialogOption.title"
      :visible.sync="formDialog"
      width="30%"
    >
      <div class="formBox">
        <el-form ref="form" :model="classForm" label-width="120px">
          <el-form-item label="所属分类">
            <!-- <el-input v-model="form.parentId"></el-input> -->
            <el-cascader
              :options="treeData"
              ref="cascader"
              v-model="cascaderValue"
              :props="{
                checkStrictly: true,
                value: 'id',
                label: 'name',
                emitPath: false,
              }"
              @change="changeClass"
              :disabled="topLevel || topLevelEdit"
              clearable
            ></el-cascader>
          </el-form-item>

          <el-form-item
            label="创建顶级分类"
            v-if="formDialogOption.title == '添加'"
          >
            <el-checkbox v-model="topLevel"></el-checkbox>
          </el-form-item>
          <el-form-item
            label="分类名称"
            v-if="formDialogOption.title == '添加'"
          >
            <el-input v-model="classForm.entityClassificationName"></el-input>
          </el-form-item>
          <div v-if="formDialogOption.title == '修改'">
            <el-form-item
              label="修改顶级分类"
              v-if="formDialogOption.title == '修改'"
            >
              <el-checkbox v-model="topLevelEdit"></el-checkbox>
            </el-form-item>
            <el-form-item
              label="分类名称"
              v-for="(item, index) in childrenClass"
              :key="index"
            >
              <el-input v-model="item.label" style="width: 70%"></el-input>
              <span style="margin-left: 15px">
                <el-button type="text" size="mini" @click.stop="isEdit(item)"
                >修改</el-button
                >
                <el-button type="text" size="mini" @click.stop="isDelete(item)"
                >删除</el-button
                >
              </span>
            </el-form-item>
          </div>

          <div style="text-align: right">
            <el-button
              @click="isAdd"
              type="primary"
              v-if="formDialogOption.title == '添加'"
            >提交
            </el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>

    <uploadStatistics
      @clickIsUp="clickIsUp"
      :isUp="uploadStatisticsBloun"
    ></uploadStatistics>
    <!-- 添加标签 -->

    <!-- 添加标签 -->

    <el-dialog
      title="提示"
      :visible.sync="visibles.open"
      width="50vw"
      class="dialogAddTree"
    >
      <div
        style="height: 68vh; display: flex; min-height: 800px; overflow: auto"
      >
        <div class="diaLeft">
          <div
            @click="clickTypeClass(item)"
            v-for="(item, index) in typeClassList"
            class="diaItem"
            :key="index"
          >
            {{ item.tagHeaderName }}
          </div>
        </div>
        <div class="diaRight">
          <el-tree
            :data="typeTreeData"
            :props="defaultProps1"
            :highlight-current="true"
            :default-expand-all="false"
            @node-contextmenu="openMenu"
          ></el-tree>
        </div>
      </div>
      <ul
        ref="card"
        v-show="visible"
        :style="{ left: left + 'px', top: top + 'px' }"
        class="contextmenu"
      >
        <li @click="selectedNode(oldClick)">
          <i class="el-icon-circle-plus-outline"></i> 添加标签
        </li>
      </ul>
    </el-dialog>

    <!-- 网页端 -->

    <!-- 移动端 -->

    <div class="rightMobel" v-if="screenSize.width < typeScreen">
      <QuestionBankMobel></QuestionBankMobel>
    </div>

    <!-- 移动端 -->
  </div>
</template>
<script>
import {
  listClassification,
  getClassification,
  delClassification,
  addClassification,
  updateClassification,
  listBank,
  listAnswer,
  delBank,
} from "@/api/questionBank/management";
import {getToken} from "@/utils/auth";
import uploadStatistics from "./uploadStatistics.vue";
import {mapGetters} from "vuex";
import QuestionBankMobel from "./mobel/index.vue";
import {listTypes, listHeader} from "@/api/questionBank/type.js";
import {Notification} from "element-ui";

export default {
  components: {
    uploadStatistics,
    QuestionBankMobel,
  },

  data() {
    return {
      treeData: [],

      defaultProps: {
        children: "children",
        label: "name",
      },
      classForm: {},
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        entityClassificationId: null,
        params: {questionTypesId: null},
        difficulty: null,
        questionTypes: null,
        testItemContent: null,
        analysis: null,
        createBy: null,
      },
      queryParams1: {
        questionTypesName: "",
      },
      total: 0,
      totalQuantity: 0,
      clickHandler: null, // 存储事件处理函数的引用
      mdata: null,
      oldBankId: "",
      dialogVisible: false,
      formDialog: false,
      formDialogOption: {
        title: "添加",
      },
      classForm: {
        parentId: "",
        entityClassificationName: "",
        reserve2: "",
      },
      childrenClass: [],
      cascaderValue: "",
      uploadStatisticsBloun: false, //上传统计
      topLevel: false,
      topLevelEdit: false,
      //搜索
      typeClassList: [],
      defaultProps1: {
        children: "children",
        label: "name",
        value: "id",
      },
      typeTreeData: [],
      visible: false,
      top: 0,
      left: 0,
      oldClick: {},
      visibles: {
        open: false,
      },
    };
  },

  computed: {
    ...mapGetters(["screenSize","typeScreen"]),
  },
  updated() {
    //判断是否初始配置，若无则配置。
    if (!this.mathJax.isMathjaxConfig.bool) {
      this.mathJax.initMathjaxConfig();
    }
    this.$nextTick((_) => {
      //传入组件id，让组件被MathJax渲染
      this.mathJax.MathQueue("questionList-page");
    });
  },

  mounted() {
    this.getTreeList();
    this.getListTypesClass();

    setTimeout(() => {
      //判断是否初始配置，若无则配置。
      if (!this.mathJax.isMathjaxConfig.bool) {
        this.mathJax.initMathjaxConfig();
      }
      this.$nextTick((_) => {
        //传入组件id，让组件被MathJax渲染
        this.mathJax.MathQueue("questionList-page");
      });
    }, 300);

    let kkk = setInterval(() => {
      if (this.$store.state.questionBank.node) {
        console.log(this.$store.state.questionBank.node);
        if (this.treeData.length != 0) {
          clearInterval(kkk);
          this.$refs.elTree.setCurrentKey(this.$store.state.questionBank.node);
          this.expandNode(
            this.$store.state.questionBank.node,
            this.$refs.elTree
          );
          console.log(localStorage.getItem("params"), "本地存储");
          let queryParams = JSON.parse(localStorage.getItem("params"));
          // this.queryParams.pageNum=queryParams.pageNum
          // this.queryParams.entityClassificationId =
          //   queryParams.entityClassificationId;
          // this.$set(this.queryParams, "pageNum", queryParams.pageNum);
          this.$set(this, "queryParams", queryParams);
          this.getTableData();
        }
      } else {
        let queryParams = JSON.parse(localStorage.getItem("params"));
        if (queryParams) {
          console.log(queryParams, "pueryParams");
          // this.$set(this.queryParams, "pageNum", queryParams.pageNum);
          this.$set(this, "queryParams", queryParams);
        } else {
        }

        this.getTableData();
        clearInterval(kkk);
      }
    }, 300);
  },
  watch: {
    formDialog: function (n, o) {
      if (!n) {
        this.childrenClass = [];
        this.cascaderValue = "";
      }
    },
    topLevelEdit: function (n, o) {
      if (n) {
        let arr = [];
        this.treeData.forEach((ele) => {
          let obj = {
            label: ele.name,
            value: ele.id,
          };
          arr.push(obj);
        });
        this.childrenClass = arr;
      } else {
        this.childrenClass = [];
      }
    },
    queryParams: {
      handler: function (n, o) {
        console.log(this.queryParams, "queryParams");
        localStorage.setItem("params", JSON.stringify(this.queryParams));
      },
      deep: true,
    },

    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },

  methods: {
    reserveTableData() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        entityClassificationId: null,
        params: {questionTypesId: null},
        difficulty: null,
        questionTypes: null,
        testItemContent: null,
        analysis: null,
        createBy: null,
      };
      this.getTableData();
    },

    expandNode(key, tree) {
      if (!key || !tree) return;

      const node = tree.store.nodesMap[key];
      if (node) {
        const parent = node.parent;
        if (parent && parent.level > 0) {
          parent.expanded = true;
          this.expandNode(parent.data.id, tree); // 递归展开父节点
        }
        node.expanded = true; // 展开当前节点
      }
    },

    gogo(val) {
      // console.log(val);
      if (val == "" || val == null) return;
      let item = JSON.parse(JSON.stringify(val));
      let ord = /begin{array}([\s\S]*?)\\end{array}/g; // 定义正则表达式，用于匹配以 [\begin{array} 开头的字符串

      let arr = item.match(ord); // 使用 match 方法获取所有匹配项
      // console.log(arr, "arr");
      if (arr == null || arr.length == 0) return val;

      let deleP = (P) => {
        let newP = P.split("<p>");
        let a = newP.join(" ");
        let b = a.split("</p>");
        let c = b.join(" ");
        // console.log(c, "newp");
        return c;
      };

      let abc = null;
      arr.forEach((ele) => {
        abc = val.split(ele);
        abc = abc.join(deleP(ele));
      });
      return abc;
      console.log(abc, "拼接完成");
    },

    isEdit(data) {
      for (let i = 0; i < this.childrenClass.length; i++) {
        if (this.childrenClass[i].value == data.value) continue;

        if (this.childrenClass[i].label == data.label) {
          this.$message.warning("同层级不能有重名分类");
          return;
        }
      }

      let obj = {
        entityClassificationId: data.value,
        entityClassificationName: data.label,
      };
      updateClassification(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getTreeList();
        }
      });
    },
    isDelete(data) {
      this.$confirm("此操作将删除分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delClassification(data.value).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.childrenClass = this.childrenClass.filter((ele) => {
                return ele.value != data.value;
              });
              this.getTreeList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    isAdd() {
      if (this.topLevel) {
        if (this.classForm.entityClassificationName == "") {
          this.$message.warning("分类名称不能为空");
          return;
        }

        for (let i = 0; i < this.treeData.length; i++) {
          if (this.treeData[i].id == this.classForm.id) break;
          if (
            this.treeData[i].name == this.classForm.entityClassificationName
          ) {
            this.$message.warning("同层级不能有重名分类");
            return;
          }
        }

        if (this.classForm.type != null) {
        } else {
          let obj = {
            parentId: 0,
            entityClassificationName: this.classForm.entityClassificationName,
            reserve2: 1,
          };
          addClassification(obj).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.formDialog = false;
              this.getTreeList();
            }
          });
        }
      } else {
        if (
          this.$refs.cascader.getCheckedNodes()[0] == null ||
          this.classForm.entityClassificationName == ""
        ) {
          this.$message.warning("父级或分类名称不能为空");
          return;
        }
        let node = this.$refs.cascader.getCheckedNodes()[0];
        for (let i = 0; i < node.children.length; i++) {
          if (node.children[i].data.id == this.classForm.id) break;
          if (
            node.children[i].data.name ==
            this.classForm.entityClassificationName
          ) {
            this.$message.warning("同层级不能有重名分类");
            return;
          }
        }

        if (this.classForm.type != null) {
        } else {
          let obj = {
            parentId: this.classForm.parentId,
            entityClassificationName: this.classForm.entityClassificationName,
            reserve2: Number(node.data.type) + 1,
          };
          addClassification(obj).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.formDialog = false;
              this.getTreeList();
            }
          });
        }
      }
    },
    getToken() {
      return getToken();
    },

    getTreeList() {
      listClassification().then((res) => {
        this.treeData = res.data;
        this.init(this.treeData);
      });
    },
    //点击树状图
    handleNodeClick(val, node) {
      // console.log(node);
      this.$store.commit("questionBank/SET_NODE", val.id);
      this.queryParams.pageNum = 1;

      this.queryParams["entityClassificationId"] = val.id;

      this.getTableData();
    },
    append(node, data) {
      // console.log(node, data);
      const newChild = {id: 1, name: "testtest", children: [], reserve1: 1};
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
      node.expanded = true;
    },

    edit(data) {
      data.reserve1 = 1;
      this.mdata = JSON.parse(JSON.stringify(data));
      this.clickHandler = () => this.bodyEdit(data);
      document.body.addEventListener("click", this.clickHandler);
    },
    bodyEdit(data) {
      data.name = this.mdata.name;
      data.reserve1 = 0;
      if (this.clickHandler) {
        document.body.removeEventListener("click", this.clickHandler);
        this.clickHandler = null;
      }
    },

    remove(node, data) {
      delClassification(data.id).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.getTreeList();
        }
      });
    },

    init(data) {
      if (data.length === 0) return;
      for (let i = 0; i < data.length; i++) {
        if (typeof data[i] === "object" && data[i] !== null) {
          this.$set(data[i], "reserve1", 0);
        }
        if (Array.isArray(data[i].children) && data[i].children.length > 0) {
          this.init(data[i].children);
        }
      }
    },
    getTableData() {
      listBank(this.queryParams).then((res) => {
        console.log(res,'返回信息')
        if(res.code==666){
          Notification.error({ title: res.msg });
          return
        }
        if (res.code == 200) {
          this.tableData = res.rows;
          this.total = res.total;
          this.totalQuantity = res.totalQuantity;
        }
        // else {
        //   this.$message.warning("搜索内容为空");
        // }
      });
    },
    addQuestions() {
      this.$router.push("/questionBank/questionBank/management/addQuestions");
    },
    //试题详情
    tableListExpand(row, expandedRows) {
      // console.log(row, expandedRows);
      if (this.oldBankId != "" && this.oldBankId != row) {
        this.$refs.tableRow.toggleRowExpansion(this.oldBankId, false);
      }
      this.oldBankId = row;
      //判断是否初始配置，若无则配置。
      if (!this.mathJax.isMathjaxConfig.bool) {
        this.mathJax.initMathjaxConfig();
      }
      this.$nextTick((_) => {
        //传入组件id，让组件被MathJax渲染
        this.mathJax.MathQueue("questionList-page");
      });
      if (row.answerList && row.answerList.length != 0) return;
      let obj = {
        itemBankId: row.itemBankId,
      };
      listAnswer(obj).then((res) => {
        if (res.code == 200) {
          row.answerList = res.rows;
          //判断是否初始配置，若无则配置。
          if (!this.mathJax.isMathjaxConfig.bool) {
            this.mathJax.initMathjaxConfig();
          }
          this.$nextTick((_) => {
            //传入组件id，让组件被MathJax渲染
            this.mathJax.MathQueue("questionList-page");
          });
        }
      });
    },
    //删除题库
    deleteTable(val) {
      this.$alert("确认要删除吗？", "请确认", {
        confirmButtonText: "确定",
        closeOnClickModal: true,
        callback: (action) => {
          if (action == "confirm") {
            delBank(val.itemBankId).then((res) => {
              if (res.code == 200) {
                this.$message.success("删除成功");
                this.getTableData();
              }
            });
          }
          // console.log(action, "slefhioshfusefhiu");
        },
      });
    },
    //修改题目
    editTable(val) {
      this.$router.push(
        "/questionBank/questionBank/management/addQuestions?itemBankId=" +
        val.itemBankId
      );
    },
    //批量上传
    batchAddQuestions() {
      this.dialogVisible = true;
    },
    //上传成功
    upSuccess(response, file, fileList) {
      // console.log(response, file, fileList);
      if (response.code == 200) {
        let res = response.msg.split("！");
        // console.log(res);

        this.$notify({
          title: res[0],
          dangerouslyUseHTMLString: true,
          message: res[1],
          // message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
        });
      }
    },
    //form表单所属分类
    changeClass(val) {
      // console.log(val);

      this.classForm.parentId = val;

      let node = this.$refs.cascader.getCheckedNodes()[0];
      this.childrenClass = node.children;
    },
    //处理标签
    setLabel(val) {
      let arr = [];
      val.forEach((ele) => {
        arr.push(ele.questionTypes);
      });
      return arr;
    },
    //行点击事件
    rowClick(row) {
      // console.log(row);
      if (this.oldBankId == row) {
        this.$refs.tableRow.toggleRowExpansion(row, false);
      } else {
        this.$refs.tableRow.toggleRowExpansion(row, true);
      }
    },
    //切换输入框
    clickIsUp(val) {
      console.log(val);
      this.uploadStatisticsBloun = val;
    },
    //form表单搜索
    //标签
    getListTypesClass() {
      let obj = {
        pageSize: 999,
        pageNum: 1,
      };
      listHeader(obj).then((res) => {
        this.typeClassList = res.rows;
        this.clickTypeClass(res.rows[0]);
      });
    },
    //点击标签分类
    clickTypeClass(item) {
      listTypes({reserve3: item.tagHeaderId}).then((res) => {
        this.typeTreeData = res.rows;
      });
    },
    openMenu(event, data) {
      this.left = event.clientX;
      this.top = event.clientY;
      this.visible = true;
      this.oldClick = data;
    },
    //点击树状图添加标签
    selectedNode(data, node, event) {
      this.queryParams.params.questionTypesId = data.id;
      this.queryParams1.questionTypesName = data.name;
      this.visible = false;
      this.visibles.open = false;
    },
    closeMenu() {
      this.visible = false;
      this.visibles.open = false;
    },
    //img去除\\
    setContent(val) {
     try {
       if (val.includes('\\\\"')) {
         let abc = val.replaceAll('\\\\"', "");
         return abc;
       } else {
         let abc = val.replaceAll('\\"', "");
         return abc;
       }
     }catch (e) {
       console.log(e,'报错')
       return ''
     }
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;
  background-color: #f1f3f8;
  padding: 15px;
  box-sizing: border-box;
  display: flex;

  .left {
    height: 100%;
    width: 400px;
    // width: 265px;
    background-color: white;
    overflow: auto;

    .Ltitle {
      font-size: 16px;
      padding: 0 15px;
      line-height: 50px;
      display: flex;
      align-items: center;

      span {
        margin-right: 15px;
      }

      img {
        height: 15px;
        width: 15px;
        margin-right: 15px;
      }

      img:nth-of-type(1) {
        transform: rotateZ(90deg);
      }

      img:nth-of-type(2),
      img:nth-of-type(3) {
        opacity: 0.5;
      }
    }

    .Lline {
      height: 1px;
      background-color: #f1f3f8;
    }

    .Ltree {
      padding: 15px 0;
      height: calc(100% - 51px);
      overflow: auto;
      // width: 500px;

      .el-input {
        width: 50%;
        margin-right: 8px;
      }

      ::v-deep .el-tree-node {
        padding: 5px 0;
      }
    }
  }

  .right {
    height: 100%;
    width: calc(100% - 415px);
    // width: calc(100% - 280px);
    overflow: auto;
    background-color: white;
    margin-left: 15px;
    padding: 0 15px;
    box-sizing: border-box;

    .RTop {
      height: auto;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      > ::v-deep p {
        display: flex;
        flex-wrap: wrap;
      }
    }

    .RForm {
      .el-form-item {
        min-width: 200px;

        ::v-deep .el-form-item__content {
          width: 180px;
        }
      }
    }

    .rBottom {
      .rItem {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        > span:nth-last-child(1) {
          > p {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
          }

          display: flex;
          align-items: center;
        }
      }
    }
  }

  ::v-deep p {
    display: inline;
    // display: flex;
    align-items: center;
  }
}

.label {
  span {
    margin-right: 15px;
  }
}

.el-icon-edit {
  color: #f1f3f8;
}

.el-tree-node {
  .custom-tree-node {
    line-height: 30px;
  }

  > .el-tree-node__content:hover {
    .label {
      display: inline-block;
    }
  }

  .label {
    display: none;
  }
}

.is-current {
  > .el-tree-node__content:nth-of-type(1) {
    .label {
      display: inline-block;
    }
  }
}

.expandBox {
  height: auto;
  // height: 500px;
  background-color: #f1f3f8;
  padding: 20px;
  display: flex;

  .expandLeft {
    flex: 1;
    background-color: white;
    overflow: auto;
    display: flex;
  }

  .expandLR {
    width: 20px;
  }

  .expandRight {
    padding-left: 15px;
    flex: 1;
    overflow: auto;
    min-width: 60%;
    background-color: white;

    // margin-left: 20px;
    .eItem {
      display: flex;

      .eLItem {
        color: rgba(0, 0, 0, 0.3);
        font-size: 16px;
        line-height: 40px;
        text-align: right;
        font-weight: bold;
      }

      .eRItem {
        line-height: 40px;
        padding-left: 10px;
        font-size: 16px;
        min-width: "min-content";
      }
    }
  }

  .left {
    max-width: 100px;
    // background-color: beige;
    flex: 1;

    .wz {
      color: rgba(0, 0, 0, 0.3);
      font-size: 16px;
      line-height: 40px;
      text-align: right;
      font-weight: bold;
    }
  }

  .right {
    // background-color: rgb(221, 221, 113);
    flex: 1;
    padding: 10px 0;
    font-size: 16px;

    .rBottom {
      margin-top: 10px;

      span {
        line-height: 40px;
      }

      span:first-child {
        // margin-right: 10px;
      }

      p {
        display: flex;
        align-items: center;
      }
    }
  }
}

.tableColumn {
  .info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    ::v-deep > p {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .tableInfo {
    display: flex;
    margin-top: 20px;

    .tableItem {
      display: flex;

      .value {
        margin-right: 15px;

        span {
          margin-right: 15px;
        }
      }
    }
  }

  .tableTitle {
    .tableTitleKey {
      margin-left: 15px;
    }
  }
}

.el-tree {
  .el-tree-node__content {
    display: block !important;
  }

  .el-tree-node__children {
    overflow: visible !important;
  }
}

::v-deep .el-tree-node > .el-tree-node__children {
  overflow: visible;
}

::v-deep .el-tree--highlight-current .el-tree-node {
  min-width: max-content;
}

#option {
  display: flex;
  align-items: center;

  span {
    display: flex;
    align-items: center;

    ::v-deep p {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }
}

//搜索
.dialogAddTree {
  ::v-deep .el-dialog {
    min-width: 1070px;
    // position: relative;
  }
}

.diaRight {
  flex: 1;
}

.diaLeft {
  min-width: 250px;
  text-align: center;

  .diaItem {
    line-height: 40px;
  }

  .diaItem:hover {
    background-color: #dcdfe6;
    cursor: pointer;
  }
}

.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: fixed;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;

    &:hover {
      background: #eee;
    }
  }
}

.formBtn {
  ::v-deep .el-form-item__content {
    min-width: max-content;
  }
}

@media (max-width: 500px) {
  .box {
    padding: 0;

    .left {
      display: none;
    }

    .right {
      flex: 1;
      display: none;
    }

    .rightMobel {
      height: 100%;
      overflow: hidden;
      background-color: #f1f3f8;
      flex: 1;
      box-sizing: border-box;
    }
  }
}

.key {
  min-width: max-content;
}

.value {
  min-width: max-content;
}

.value1 {
  display: flex;
  flex-wrap: wrap;

  .vlaue1Item {
    margin: 0 6px 6px;
  }
}
</style>
